<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title></title>
    <script src="js/flexible.debug.js"></script>
    <script src="js/flexible_css.debug.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="app">
        <header>
            <div class="cover">
                <img :src="list.cover500 || list.cover200 || list.imgUrl || './img/logo.png'" :alt="locale === 'zh' ? '封面图':'Cover'">
            </div>
            <div class="title">
                <h3 v-text="locale === 'zh' ? list.catalogueCname || list.catalogueName || list.cname || list.name : list.catalogueName || list.name"></h3>
                <p class="info" :title="list.blurb">{{list.blurb || list.author}}</p>
            </div>
        </header>
        <section>
            <h3 v-text="locale === 'zh' ? '单曲列表':'Single list'"></h3>
            <div v-if="sourceType == 1" class="list">
                <ul v-for="item of list.works" :key="item.workId">
                    <h4 v-text="locale === 'zh' ? item.workCname || list.workName : list.workName"></h4>
                    <li v-for="(val,idx) of item.compositions" @click="toSong(val)" :key="val.trackId">
                        <p class="songName"><span>{{idx+1}}.</span>{{locale === 'zh' ? val.trackCtitle || val.trackTitle : val.trackTitle}}</p>
                        <p class="songInfo">
                            <span v-for="i of val.composer" :key="i.fullName" v-text="locale === 'zh' ? i.fullCname || i.fullName : i.fullName"></span>
                        </p>
                    </li>
                </ul>
            </div>
            <div v-else class="list">
                <ul>
                    <li v-for="(item,index) of list.musicCompositions" @click="toSong(item)" :key="item.trackId">
                        <p class="songName"><span>{{index+1}}.</span>{{locale === 'zh' ? item.trackCtitle || item.trackTitle : item.trackTitle}}</p>
                        <p class="songInfo">
                            <span v-for="i of item.composer" :key="i.fullName" v-text="locale === 'zh' ? i.fullCname || i.fullName : i.fullName"></span>
                        </p>
                    </li>
                </ul>
            </div>
            <p class="more" @click="dialogMore" v-text="locale === 'zh' ? '查看更多':'See More'"></p>
        </section>
        <div class="foot">
            <div class="logo">
                <img :src="logo ? logo : './img/logo.png'" alt="logo">
                <span v-text="locale === 'zh' ? appName.zh:appName.en"></span>
            </div>
            <div class="download">
                <div v-if="isWeixin" @click="dialogFn" v-text="locale === 'zh' ? '立即下载' : 'Download'"></div>
                <!-- ios上架后删除 -->
                <div v-else-if="link == ''" @click="iosDownload" v-text="locale === 'zh' ? '立即下载' : 'Download'"></div>
                <a v-else :href="link" target="_blank" v-text="locale === 'zh' ? '立即下载' : 'Download'"></a>
            </div>
        </div>
        <div v-show="visited" class="dialog">
            <div v-if="isWeixin">
                <div class="upContent"><img src="./img/upEn.png" /></div>
                <div class="upText" v-text="locale === 'zh' ? `微信无法直接下载，点击右上角选择“在浏览器中打开”，即可下载${weiXinTitle.zh}APP` : `Wechat cannot download it directly. Click the upper right corner and select 'open in browser' to download ${weiXinTitle.en}`"></div>
            </div>
        </div>
        <div v-show="isDownDialog" class="downDialog">
            <div class="box">
                <span v-text="locale === 'zh' ? '下载APP听更多音乐':'Download the APP to listen to more music'"></span>
                <div class="downBox">
                    <div v-if="isWeixin" class="downBtn" @click="dialogFn" v-text="locale === 'zh' ? '立即下载' : 'Download now'"></div>
                    <!-- ios上架后删除 -->
                    <div v-else-if="link == ''" class="downBtn" @click="iosDownload" v-text="locale === 'zh' ? '立即下载' : 'Download'"></div>
                    <a v-else :href="link" class="downBtn" target="_blank" v-text="locale === 'zh' ? '立即下载' : 'Download now'"></a>
                    <img class="close" @click="isDownDialog = false" src="./img/close.png" :alt="locale === 'zh' ? '关闭':'Close'">
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data: {
            locale: '', // 识别系统语言
            sourceType: '',
            sourceId: '',
            moduleId: '',
            list:[], //单曲列表
            visited: false,
            isWeixin:false,
            isDownDialog: false,
            link: '',
            isAndroid: '',
            isIOS: '',
            appName: {
                zh: "库客音乐图书馆",
                en: "KUKE Music Library"
            },
            weiXinTitle: {
                zh: "库客音乐图书馆机构版",
                en: "KUKE Music Library (Institutional Version)"
            },
            logo: "", //logo地址
            appId: null, //appID 传给播放页
        },
        methods: {
            iosDownload() {
                alert(this.locale === 'zh' ? '敬请期待':'Coming soon');
            },
            dialogFn() {
                this.visited = true;
                this.isDownDialog = false
            },
            dialogMore() {
                this.isDownDialog = true;
            },
            toSong(item) {
                let url = "song.html?sourceId="+item.trackId+"&appId="+this.appId;
                window.location.href = url;
            },
            editTitle(locale){
                let title = document.getElementsByTagName('title')[0];
                title.innerText = locale === 'zh' ? '库客音乐图书馆机构版' : 'KUKE Music Library PRO';
            }
        },
        mounted() {
            this.locale = navigator.language.substring(0, 2).toLowerCase();
            let ua = navigator.userAgent.toLowerCase();
            let dialog = document.querySelector('.dialog')
            this.isWeixin = ua.indexOf('micromessenger') != -1;

            let iosLinkUrl = "" // https://apps.apple.com/cn/app/%E5%BA%93%E5%AE%A2%E9%9F%B3%E4%B9%90hi-res/id1564214901 下载地址ios
            let androidLinkurl = "https://eggreader-img.oss-cn-beijing.aliyuncs.com/app-release.apk" //) android
            dialog.style.height = document.documentElement.clientHeight + 'px'

            let u = navigator.userAgent
            this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
            this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            this.link = this.isIOS ? iosLinkUrl : androidLinkurl

            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                // var query = "&moduleId=516&sourceId=212&sourceType=2&appId=1493885765335588864"
                var myArr = query.split("&");
                for (var i = 0; i < myArr.length; i++) {
                    var pair = myArr[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            }
            this.sourceId = getQueryVariable('sourceId')
            this.sourceType = getQueryVariable('sourceType')
            this.moduleId = getQueryVariable('moduleId')
            // let params = {
            //     "sourceId": "34-011906", //this.sourceId, //"34-011906", //  //
            //     "sourceType": 1, // this.sourceType, //1
            // }
            // 单类型App下载地址
            if(getQueryVariable('appId') && getQueryVariable('appId') !== "null") {
                this.appId = getQueryVariable('appId');
                axios.post('https://bapi.kuke.com/single/app/v100/getCompanyAppInfoByShare',{
                    appId:getQueryVariable('appId')
                }).then(res => {
                if(res.data.code === 1000000) {
                    let result = res.data.source;
                    // title
                    document.getElementsByTagName('title')[0].innerText = result.appName;
                    // foot - App名
                    this.appName = this.weiXinTitle =  {
                        zh: result.appName,
                        en: result.appName
                    }
                    this.logo = result.logoMaxUrl; //设置logo
                    // 设置下载链接
                    if(this.isIOS) {
                        if(result.iosStoreUrl) {
                            this.link = result.iosStoreUrl
                        } else {
                            this.link = "";
                            // alert(this.locale === 'zh' ? '敬请期待':'Coming soon');
                        }
                    } else {
                        if(result.androidPackageUrl) {
                            this.link = result.androidPackageUrl
                        } else {
                            this.link = "";
                        }
                    }
                } else {
                    alert(this.locale === 'zh' ? "获取失败,请检查网络环境":"Failed to get. Please check the network environment")
                }
                })
            } else {
                this.editTitle(this.locale);
            }
            let url,params;
            //专辑
            if(this.sourceType == 1) {
                params = {
                    catalogueId: this.sourceId,
                    // versionId: -1, //版本ID
                    // channelId: -1, // 渠道ID
                    // version: "pc", //版本号
                    // device: "pc", // 设备号
                    // useType: 3, //平台信息 3.pc
                    token: "",
                }
                if(this.moduleId == 516) {
                    url = "/classical/v100/musicAlbumInfo";
                } else if (this.moduleId == 518) {
                    url = "/national/v100/musicAlbumInfo";
                } else if (this.moduleId == 517) {
                    url = "/audiobooks/v100/musicAlbumInfo";
                } else if (this.moduleId == 580) {
                    url = "/jazz/v100/musicAlbumInfo";
                }
            } else if(this.sourceType == 2) { //歌单
                params = {
                    songSheetId: this.sourceId,
                    token: "",
                }
                if(this.moduleId == 516) {
                    url = "/classical/v100/getSongSheetInfo";
                } else if (this.moduleId == 518) {
                    url = "/national/v100/getSongSheetInfo";
                } else if (this.moduleId == 580) {
                    url = "/jazz/v100/getSongSheetInfo";
                }
            } else if(this.sourceType == 3) { //单曲
                params = {
                    trackId: this.sourceId,
                    token: "",
                }
                url = "/app/v100/getComposition";
            }
            axios.post('https://bapi.kuke.com'+url, params).then(res => {
                // console.log(res.data.source)
                if(res.data.code === 1000000) {
                    this.list = res.data.source;
                } else {
                    this.list = [];
                    alert(this.locale === 'zh' ? "获取失败,请检查网络环境":"Failed to get. Please check the network environment")
                }
            })
        }
    })
</script>